import React, { useState } from 'react'
import style from './index.module.scss'
import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import { HomeOutlined, PlusOutlined, BellOutlined, UserOutlined } from '@ant-design/icons'
import { useEffect } from 'react'
import { connect, useSelector } from 'react-redux'
import useSocketHook from '../ComponentHook/UseSocketHook'
import { getMessageNumberApi, updateMessageNumberApi } from '@/common/api'
import _ from 'lodash'
const nenuList = [
    {
        title:"首页",
        icon:<HomeOutlined />,
        path:"/explor"
    },
    {
        title:"发布",
        icon:<PlusOutlined />,
        path:"/public"
    },
    {
        title:"通知",
        icon:<BellOutlined />,
        path:"/message"
    },
    {
        title:"我",
        icon:<UserOutlined />,
        path:"/information"
    },
    {
        title:"退出登录",
        icon:<UserOutlined />,
        path:"/login"
    },
]
function Menu(props) {
     const {message,addMessage}  = props
    const navigate = useNavigate()
    const location = useLocation()
    const pathName = location.pathname.split("/")[1]
    const { _id} = useSocketHook()
     useEffect(() => {
        getMessageNumberFn()
    }, [props.userInfo])
    const toLogin = (value,e)=>{
        if(value==='/login'){
            e.preventDefault()
            localStorage.clear('userInfo')
            navigate("/login")
        }else if(value==='/message'){
            // updateMessageNumberFn()
        }
    }
    
    useEffect(() => {
        // console.log(socketMessage,'socketMessage');
        // if (socketMessage?.messageType === "reviewNumber") {
        //     addMessage({ type: "reviewNumber", payload: 1 })
        // }
        // if (socketMessage?.messageType === "likeAndCollectionNumber") {
        //     addMessage({type:"likeAndCollectionNumber",payload:1})
        // }
        // if (socketMessage?.messageType === "attentionNumber") {
        //     addMessage({type:"attentionNumber",payload:1})
        // }
       
    },[])
    // 获取消息数量
    const getMessageNumberFn = async()=>{
        try {
            const RES = await getMessageNumberApi({userId:_id})
            if (RES.code === 200) {
                addMessage({type:"addMessage",payload: _.get(RES, 'data.newMesageNumber')})
            }
        } catch (error) {
        }
    }
    return (
        <div className={style.Menu}>
            <div className={style.Nav}>
                {nenuList.map((item,index)=>(<div key={index} className={style.NavList}>
                    <NavLink onClick={(e)=>toLogin(item.path,e)} className={({ isActive }) => isActive ? style.active : ''} to={item.path} >
                        {item.icon}
                        {item.title}
                        {item.path==='/message'&&message.totalNumber!==0&&<i className='messageNumber'>{message.totalNumber>100?'99+':message.totalNumber}</i>}
                    </NavLink>  
                </div>)) 
                }
            </div>
        </div>
    )
}
export default connect((state) => {
    return {
        userInfo: state.user.userInfo,
        message:state.message.messageNumber
    }
}, dispatch => {
    return {
        addUser: (payload) => dispatch({ type: "addUser", payload }),     
        addMessage: (value) => dispatch(value),
    }
})(Menu)
